<template>
<!-- 书籍分类页 -->
    <div>
        <Header :Title="title" :Type='type'></Header>
        <van-grid :border='false'>
            <van-grid-item 
                v-for="(i,j) in cateList" 
                :key='j'
                @click="goToClassDetails(i.name,i.id)">
                <img :src="imgList[j].imgSrc" alt="">
                <p>{{i.name}}</p>
            </van-grid-item>
        </van-grid>
        <DownLoad></DownLoad>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import DownLoad from '@/components/DownLoad.vue'
export default {
    name:'Cate',
    components:{
        Header,
        Footer,
        DownLoad,
    },
    data(){
        return{
            title:'快读小说-永久免费',
            type:2,
            cateList:[
                {"id":"3","name":"武侠"},
                {"id":"4","name":"游戏"},
                {"id":"5","name":"历史"},
                {"id":"7","name":"科幻"},
                {"id":"9","name":"玄幻"},
                {"id":"10","name":"都市"},
                {"id":"11","name":"军事"},{"id":"12","name":"灵异"},
                {"id":"14","name":"同人"},{"id":"15","name":"仙侠"},{"id":"17","name":"女尊"},
                {"id":"19","name":"古代言情"},{"id":"20","name":"现代言情"},{"id":"21","name":"青春校园"},
                {"id":"22","name":"唯美纯爱"},
                {"id":"25","name":"青春言情"},{"id":"26","name":"出版小说"},
                {"id":"33","name":"人文社科"},
                {"id":"34","name":"悬疑灵异"},
                {"id":"40","name":"武侠仙侠"}
            ],
            imgList:[
                {imgSrc:require('../assets/01-class-martial.png')},
                {imgSrc:require('../assets/02-class-game.png')},
                {imgSrc:require('../assets/03-class-history.png')},
                {imgSrc:require('../assets/04-class-science.png')},
                {imgSrc:require('../assets/05-class-mysterious.png')},
                {imgSrc:require('../assets/06-class-city.png')},
                {imgSrc:require('../assets/07-class-military.png')},
                {imgSrc:require('../assets/08-class-spirit.png')},
                {imgSrc:require('../assets/09-class-acg.png')},
                {imgSrc:require('../assets/10-class-god.png')},
                {imgSrc:require('../assets/11-class-recommend.png')},
                {imgSrc:require('../assets/01-class-martial.png')},
                {imgSrc:require('../assets/02-class-game.png')},
                {imgSrc:require('../assets/03-class-history.png')},
                {imgSrc:require('../assets/04-class-science.png')},
                {imgSrc:require('../assets/05-class-mysterious.png')},
                {imgSrc:require('../assets/06-class-city.png')},
                {imgSrc:require('../assets/07-class-military.png')},
                {imgSrc:require('../assets/08-class-spirit.png')},
                {imgSrc:require('../assets/09-class-acg.png')},
            ],
        }
    },
    created(){
        this.Check()
    },
    methods:{
        Check(){
            this.$api.Preflight().then(res=>{
                if(res.errorno == 200){
                   // this.getCate()
                }
            }).catch((()=>{
                console.log('请求出错')
            }))
        },
        getCate(){
            this.$api.getCate().then(res=>{
                this.cateList=res.data
            }).catch()
        },
        goToClassDetails(i,j){
             this.$router.push({
                 name:'ClassDetails',
                 params:{
                    id:j,
                    name:i
                 }
             })
        }
    }
}
</script>
<style scoped lang='stylus'>
.van-grid
    padding .16rem
    background-color #fff
  p
    font-size .28rem
    height .64rem
    line-height .84rem
    color #222
  img
    width 100%
  >>> .van-grid-item__content
    padding .12rem .16rem 
    
  
  
</style>